<template>
  <div class="sider">
    <a-row>
      <div class="sider-logo">
        <img src="@/assets/logo.png" alt="logo" />
      </div>
    </a-row>
    <a-row>
      <div class="sider-part">
        <p class="sider-title">在线音乐</p>
        <ul>
          <li
            v-for="item in navOnline"
            :key="item.id"
            @click="siderItemClick(item)"
            :class="{ active: item.id == currentIndex }"
          >
            <a-icon :type="item.icon" :theme="item.theme" />
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="sider-part">
        <p class="sider-title">我的音乐</p>
        <ul>
          <li
            v-for="item in navLocal"
            :key="item.id"
            @click="siderItemClick(item)"
            :class="{ active: item.id == currentIndex }"
          >
            <a-icon :type="item.icon" :theme="item.theme" />
            {{ item.title }}
          </li>
        </ul>
      </div>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
      navOnline: [
        // {
        //   id: 1,
        //   title: '推荐',
        //   icon: 'star',
        //   theme: 'outlined',
        //   path: '/recommend',
        // },
        {
          id: 2,
          title: '音乐馆',
          icon: 'customer-service',
          theme: 'filled',
          path: '/hall',
        },
        {
          id: 3,
          title: '视频',
          icon: 'video-camera',
          theme: 'outlined',
          path: '/video',
        },
      ],
      navLocal: [
        {
          id: 4,
          title: '我喜欢',
          icon: 'heart',
          theme: 'outlined',
          path: '/like',
        },
      ],
    };
  },
  methods: {
    // 选项选中
    siderItemClick(item) {
      this.currentIndex = item.id;
      this.$router.push(item.path);
    },
    setNavByRoute() {
      const navPath = this.$route.path;
      this.navOnline.forEach((item) => {
        if (item.path === navPath) {
          this.currentIndex = item.id;
        }
      });
      this.navLocal.forEach((item) => {
        if (item.path === navPath) {
          this.currentIndex = item.id;
        }
      });
    },
  },
  created() {
    this.setNavByRoute();
  },
};
</script>
